Flexbox Crash Course 2022

167,511 views Jan 18, 2022 Flexbox is used for space distribution, positioning and alignment in CSS.

…

...more

...more

Intro & Slides

Setup HTML & Base CSS

Create a Flexbox Container

Float Example

Justify Content

Align Items

1.88M subscribers

Comments

410

Shoutout to you Brad from Ethiopia; I'm trying to teach myself web development and I consume your content as much as I can. Thanks for your effort you are a great gift to the world. Keep up Never stop the good thing you are doing as people are benefiting big time from your work!.

Intro & Slides

Setup HTML & Base CSS

Create a Flexbox Container

Float Example

Justify Content

Align Items

Align Self

Flex Direction & Column

Centering Elements

Flex Wrap

Order

Flex Basis

Flex Grow

Flex Shrink

Flex Property

Flexbox Layout Project

Sync to video time

Ashley Chase

Public

0/140

30.0 seconds

Continue clipping after ad finishes

Can’t create clip while ad is playing

Flexbox is used for space distribution, positioning and alignment in CSS. 💻 Project Code: https://codepen.io/bradtraversy/pen/J... 👇 Website & Courses: https://traversymedia.com 💖 Show Support Patreon: https://www.patreon.com/traversymedia PayPal: https://paypal.me/traversymedia 👇 Follow Me On Social Media: Twitter: https://twitter.com/traversymedia Instagram: https://www.instagram.com/traversymedia Linkedin: https://www.linkedin.com/in/bradtraversy Timestamps: 0:00 - Intro & Slides 5:05 - Setup HTML & Base CSS 7:50 - Create a Flexbox Container 8:20 - Float Example 9:49 - Justify Content 11:05 - Align Items 11:39 - Align Self 12:50 - Flex Direction & Column 15:15 - Centering Elements 16:32 - Flex Wrap 17:39 - Order 18:37 - Flex Basis 19:30 - Flex Grow 22:13 - Flex Shrink 23:58 - Flex Property 25:40 - Flexbox Layout Project

Intro & Slides

Setup HTML & Base CSS

Create a Flexbox Container

Float Example